<template>
  <div id="orderSearchDiv">
    <div id="dataViewDiv">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @keyup.enter.native="search()"
        id="orderSearchForm"
      >
        <el-form-item label="店铺授权码" style="margin-left:90px;">
          <br /><br />
          <el-input
            style="margin-left:-80px;width:200px"
            v-model="formInline.authCode"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺名称" style="margin-left:-60px;">
          <br /><br />
          <el-input
            style="margin-left:-60px;width:200px"
            v-model="formInline.storeName"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="大区名称"
          style="margin-left:-40px;"
          v-if="orgType == 1 || orgType == 2"
        >
          <br /><br />
          <el-select
            style="margin-left:-60px;width:200px"
            v-model="formInline.upOrgZone"
            clearable
            filterable
            placeholder="大区名称"
            @change="selCore(formInline.upOrgZone)"
          >
            <el-option
              v-for="item in corpList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="营销区域名称"
          style="margin-left:-40px;"
          v-if="orgType == 1 || orgType == 2 || orgType == 3"
        >
          <br /><br />
          <el-select
            style="margin-left:-60px;width:200px"
            v-model="formInline.baseOrgSeq"
            placeholder="营销区域名称"
            clearable
            filterable
          >
            <el-option
              v-for="item in RentalPayWay"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <br />
        <el-form-item label="扫码时间" style="margin-left:100px">
          <br /><br />
          <el-date-picker
            style="margin-left:-80px;width:410px"
            v-model="formInline.dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <div style="margin-left:1050px;text-align:right">
          <el-button
            type="primary"
            @click="search()"
            size="mini"
            icon="el-icon-search"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="kong()"
            size="mini"
            icon="el-icon-delete"
            >重置</el-button
          >
        </div>
      </el-form>

      <div style="margin-top: 20px">
        <div id="order_total_flex">
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                扫码出库数量（瓶）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.outStock }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                云店销售数量（瓶）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.outStockStore }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                扫码出库店铺数量（家）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.saleAmount }}</span>
              </div>
            </div>
          </div>
          <div class="total_row_item">
            <div class="order_content">
              <div class="order_total_title">
                云店销售店铺数量（家）
              </div>
              <div class="order_total_info">
                <span class="order_data">{{ totalData.saleAmountStore }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-divider></el-divider>
    <!-- <el-form v-for="item in tableData" :key="item.uuid">
          <div>{{item.goodsName}}</div>
          <div>扫码出库数量（瓶）{{item.scanOutDTO.outStock}}</div>
          <div>云店销售数量（瓶）{{item.scanOutDTO.outStockStore}}</div>
          <div>扫码出库店铺数量（家）{{item.scanOutDTO.saleAmount}}</div>
          <div>云店销售店铺数量（家）{{item.scanOutDTO.saleAmountStore}}</div>
        </el-form> -->

    <el-row :gutter="20">
      <el-col
        :span="6"
        :push="1"
        style="font-size:20px;"
        v-for="(item, index) in tableData"
        :key="item.uuid"
      >
        <div class="grid-content bg-purple">
          <div class="divSt" style="font-size:22px;">
            {{ item.goodsName != null ? item.goodsName : '商品' + (index + 1) }}
          </div>

          <div class="divSt">
            扫码出库数量（瓶）<span class="spanSt">{{
              item.scanOutDTO.outStock
            }}</span>
          </div>

          <div class="divSt">
            云店销售数量（瓶）<span class="spanSt">{{
              item.scanOutDTO.outStockStore
            }}</span>
          </div>

          <div class="divSt">
            扫码出库店铺数量（家）<span class="spanSt">{{
              item.scanOutDTO.saleAmount
            }}</span>
          </div>

          <div class="divSt">
            云店销售店铺数量（家）<span class="spanSt">{{
              item.scanOutDTO.saleAmountStore
            }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { queryScanOutTotal, queryScanOutInfo } from '@/api/dataReportManage';
import { getAllZone, getAllBase } from '@/api/addShopapply.js';
import qs from 'qs';

const curDateStr = function() {
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : '0' + month;
  var date = curDate.getDate();
  date = date > 9 ? date : '0' + date;
  return year + '-' + month + '-' + date;
};
export default {
  data() {
    return {
      corpList: [], //商户列表
      RentalPayWay: [], //商户列表
      logininfo: '',
      orgSeq: '',
      dindanflag: false,
      dindanflagone: false,
      orgType: '',
      loading: true,
      exportLoading: false,
      insertLoading: false,
      goodsPicDialoVisible: false,
      dialogVisibleImg: false,
      dialogVisibleScanCode: false,
      scanCodeData: [],
      dialogImageUrl: '',
      picList: [],
      dataViewDate: '1',
      dataViewRange: '',
      totalData: {
        orderNum: 0,
        outStock: 0,
        saleAmount: 0,
        orderFinishNum: 0,
        orderAcceptNum: 0,
        orderPostNum: 0,
        orderCancelNum: 0,
        payMoney: 0,
        saleAmountStore: 0,
        outStockStore: 0,
      },
      formInline: {
        sortList: [],
        orderId: '',
        orderStatus: '',
        returnStatus: '',
        customizeStatus: '',
        dateRange: [],
        payDateRange: '',
        fhDateRange: '',
        shopId: '',
        storeName: '',
        shopOwnerName: '',
        warzoneId: '',
        upOrgZone: '',
        baseId: '',
        baseName: '',
        goodsId: '',
        buyName: '',
        buyTel: '',
        goodsName: '',
        payMethod: '',
        deliveryMethod: '',
        authCode: '',
        isBuyLimit: '',
        isGiftOrder: '',
        isFeastOrder: '',
        goodsStyle: '',
      },
      allCol: [],
      col: [],
      dropCol: [],
      expandRowKeys: [],
      tableData: [], //订单列表数据
      tableDataExcel: [], //导出数据
      payData: [], //支付列表数据
      itemData: [], //商品列表数据
      total: 0,
      listQuery: {
        current: 1,
        size: 100,
      },
      sort: '',
      order: '',
      configTableDialogVisible: false, //列表配置弹窗状态
      formInline2: {
        isIndeterminate: false, //是否半选中
        isAll: true, //是否全部显示,
        menuCode: 'canCodeDataStatistics',
      },
      userMenuFieldList: [], //全部列名列表
      userMenuAllFields: [], //全部的列名
      userMenuShowFields: [], //显示的列名
      userOldMenuShowFields: [], //原显示的列名
      pickerOptions: {
        shortcuts: [
          {
            text: '最近3天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.logininfo = localStorage.getItem('logininfo');
    let orgJson = JSON.parse(this.logininfo);
    if (
      orgJson != null &&
      orgJson.orgList != null &&
      orgJson.orgList.length > 0
    ) {
      this.orgSeq = orgJson.orgList[0].orgSeq;
      this.orgType = orgJson.orgList[0].orgType;
    }
    if (this.orgType == 2) {
      //大区
      this.formInline.warzoneId = this.orgSeq;
    } else if (this.orgType == 3) {
      //营销区域
      this.formInline.baseId = this.orgSeq;
    } else if (this.orgType == 4) {
      //门店
      this.formInline.shopId = this.orgSeq;
    }

    this.queryScanOutTotal(); //加载看板头部信息
    this.queryScanOutInfo(); //加载订单列表

    this._getAllZone();
  },
  filters: {
    numFilter(value) {
      let realVal = '';
      if (!isNaN(value) && value !== '') {
        // 截取当前数据到小数点后2位
        realVal = parseFloat(value).toFixed(2);
      } else {
        realVal = '--';
      }
      return realVal;
    },
  },
  methods: {
    //点击空白日期初始化
    focusPickerDate() {
      this.dataViewRange = '';
    },
    //点击头部时间选择切换为日期状态
    changeDataViewDate() {
      this.dataViewDate = '4';
      this.queryScanOutTotal();
    },
    /*头部看板*/
    queryScanOutTotal() {
      let beginDate =
        this.formInline.dateRange.length > 0
          ? this.formInline.dateRange[0]
          : '';
      let endDate =
        this.formInline.dateRange.length > 0
          ? this.formInline.dateRange[1]
          : '';
      let data = {
        orgseq: this.orgSeq,
        beginDate: beginDate,
        endDate: endDate,
        baseName: '',
        upOrgZone: '',
        upOrgSeq: this.formInline.upOrgSeq,
        baseOrgSeq: this.formInline.baseOrgSeq,
        authCode: this.formInline.authCode.trim(),
        storeName: this.formInline.storeName.trim(),
      };
      queryScanOutTotal(data).then((res) => {
        if (res != null) {
          this.totalData.outStock = res.result.outStock;
          this.totalData.outStockStore = res.result.outStockStore;
          this.totalData.saleAmount = res.result.saleAmount;
          this.totalData.saleAmountStore = res.result.saleAmountStore;
        }
      });
    },
    /*订单列表*/
    queryScanOutInfo() {
      let beginDate =
        this.formInline.dateRange.length > 0
          ? this.formInline.dateRange[0]
          : '';
      let endDate =
        this.formInline.dateRange.length > 0
          ? this.formInline.dateRange[1]
          : '';
      let data = {
        orgseq: this.orgSeq,
        beginDate: beginDate,
        endDate: endDate,
        baseName: '',
        upOrgZone: '',
        upOrgSeq: this.formInline.upOrgSeq,
        baseOrgSeq: this.formInline.baseOrgSeq,
        authCode: this.formInline.authCode.trim(),
        storeName: this.formInline.storeName.trim(),
      };
      queryScanOutInfo(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        console.log(this.tableData);
      });
    },
    //查询
    search() {
      this.queryScanOutInfo();
      this.queryScanOutTotal();
    },
    //清空
    kong() {
      this.formInline.sortList = [];
      this.formInline.orderId = '';
      this.formInline.orderStatus = '';
      this.formInline.returnStatus = '';
      this.formInline.customizeStatus = '';
      this.formInline.dateRange = [];
      this.formInline.payDateRange = '';
      this.formInline.fhDateRange = '';
      this.formInline.storeName = '';
      this.formInline.shopOwnerName = '';
      this.formInline.upOrgZone = '';
      this.formInline.baseName = '';
      this.formInline.goodsId = '';
      this.formInline.buyName = '';
      this.formInline.buyTel = '';
      this.formInline.goodsName = '';
      this.formInline.payMethod = '';
      this.formInline.deliveryMethod = '';
      this.formInline.authCode = '';
      this.formInline.isBuyLimit = '';
      this.formInline.isGiftOrder = '';
      this.formInline.isFeastOrder = '';
      this.formInline.goodsStyle = '';
    },
    _getAllZone() {
      let data = {};
      getAllZone(data).then((res) => {
        this.corpList = res.result;
      });
    },
    selCore(value) {
      if (value != '' && value != undefined && value != null) {
        this.orgSeq = value;
        let data = { code: value };
        getAllBase(data).then((res) => {
          this.RentalPayWay = res.result;
          this.formInline.baseOrgSeq = '';
        });
      } else if (this.formInline.baseOrgSeq != '') {
        this.orgSeq = this.formInline.baseOrgSeq;
      } else {
        this.orgSeq = JSON.parse(this.logininfo).orgSeq;
      }
    },
  },
  //其他
  computed: {},
};
</script>
<style scoped>
#orderSearchDiv
  /deep/
  .el-radio-button-inner-datepicker
  .el-radio-button__inner {
  padding: 0;
}
#orderSearchDiv /deep/ .el-radio-button-inner-datepicker .el-input__inner {
  border: none;
  height: 38px;
}
#orderSearchDiv /deep/ #orderSearchForm {
  margin-left: -30px;
  padding: 0;
  display: inline-block;
  text-align: left;
}
#orderSearchDiv /deep/ .el-form--inline .el-form-item__content {
  width: 180px;
}
#orderSearchDiv /deep/ .el-range-editor.el-input__inner {
  width: 250px;
}
#orderSearchDiv /deep/ .el-dialog__body {
  padding-top: 0;
}
#order_total_flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
}
#order_total_flex /deep/ .order_content {
  cursor: pointer;
  width: 200px;
  padding: 20px 0;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex /deep/ .order_detail {
  width: 200px;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
#order_total_flex /deep/ .order_content2 {
  width: 60px;
  cursor: pointer;
  padding: 10px 0;
  margin: 0 1px;
  text-align: center;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#order_total_flex /deep/ .order_content .order_total_title {
  color: #000;
}
#order_total_flex /deep/ .order_content .order_total_info {
  margin-top: 10px;
}
#order_total_flex /deep/ .order_content .order_data {
  font-size: 1.4em;
  font-weight: bold;
}
#configTableDiv /deep/ .el-divider--horizontal {
  margin-top: 0;
}
#dataViewDiv /deep/ .el-input--suffix .el-input__inner {
  height: 40px;
}
.spanSt {
  color: #2b7dbc;
  margin: 10;
  text-align: center;
  display: block;
  display: inline-block;
  width: 60px;
  border-bottom: 1px solid #dcdfe6;
}
.divSt {
  padding: 20px;
}
</style>
